<!--用户简介和修改密码-->

<script setup lang="ts">
import type {RegistRes, User} from "~/composables/authhooks";
import AvatarUpload from "~/components/common/AvatarUpload.vue";

definePageMeta({
  //布局
  layout: 'ui-layout',
  validate: async (route: any) => {
    return true
  }
})

const passwords = reactive({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const currentPasswordShow = ref(false);
const newPasswordShow = ref(false);
const confirmPasswordShow = ref(false);

const passwordRules = ref([
  (v: string) =>
      (v && v === passwords.newPassword) || "两次输入的密码必须一致",
]);
const formValid = ref(false)  //数据验证

const {user, getAvatar_file_url} = storeToRefs(useAuthStore())


/**
 * 修改密码
 *
 */
const handleAuthChangePassword = async () => {
  if (!formValid.value) {
    useSnackbarStore().showErrorMessage('请检查输入的密码是否正确')
    return
  }
  const {status, data, msg} = await Client_PATCH(`/users/changePassword/${user.value._id}`, {
    password: passwords.newPassword,
    oldPassword: passwords.currentPassword
  }) as RegistRes
  if (status === 0) {
    useSnackbarStore().showSuccessMessage(msg)
  } else {
    useSnackbarStore().showErrorMessage(msg)
  }
}
/**
 * 更新个人信息
 */
const handleUpdateUserInfo = async () => {
  const _user = await Client_PATCH(`/users/${user.value._id}`, {
    nickname: user.value.nickname,
  }) as User
  if (_user) {
    useSnackbarStore().showSuccessMessage('更新成功')
  }
}
const key=ref(0)
const imageUrl=ref('')

const handleConfirChangeAvatar=async () => {
  const {user}=storeToRefs(useAuthStore())
  const res = await Client_PATCH(`/users/${user.value._id}`, {
    avatar_url: imageUrl.value
  })
  if (res){
    user.value.avatar_url=imageUrl.value
    key.value=0
    useSnackbarStore().showSuccessMessage('修改成功')
  }
}

onMounted(() => {
});
</script>
<template>
  <v-container elevation="0" class="mx-auto" color="transparent" max-width="1600">
    <v-row>
      <v-col cols="12" md="3">
        <v-card>
          <!--          头像、昵称和角色-->
          <div class="d-flex flex-column pa-10 align-center">
            <v-window v-model="key">
              <v-window-item key="0" class="text-center">
                <v-avatar size="120" class="elevation-10">
                  <v-img :src="getAvatar_file_url"></v-img>
                </v-avatar>
                <v-spacer/>
                <v-btn prepend-icon="mdi-pencil" variant="flat" size="x-small" color="primary" @click="key=1">修改头像
                </v-btn>
              </v-window-item>
              <v-window-item key="1" class="text-center">
                    <AvatarUpload v-model="imageUrl">
                      <v-btn size="small" color="secondary" @click="handleConfirChangeAvatar">确认修改</v-btn>
                    </AvatarUpload>
              </v-window-item>
            </v-window>
            <div class="text-center mt-5">
              <h3 class="text-h6 font-weight-bold">
                {{ user.username }}
                <v-chip v-for="(item, index) in user.role" :key="index" size="small" class="font-weight-bold"
                        color="blue">
                  {{ item }}
                </v-chip>
              </h3>
              <p class="text-body-2">{{ user.nickname }}</p>
            </div>
          </div>
          <v-divider></v-divider>
          <!--          位置-->
          <!--          <div class="py-5 px-10">-->
          <!--            <v-icon color="grey"> mdi-map-marker </v-icon>-->
          <!--            <span class="ml-4">{{ user.username }}</span>-->
          <!--          </div>-->

          <!--          <v-divider></v-divider>-->
          <!--          邮箱-->
          <div class="py-5 px-10">
            <v-icon color="grey"> mdi-email-check-outline</v-icon>
            <span class="ml-4">{{ user.email }}</span>
          </div>
          <v-divider></v-divider>

          <div class="py-5 px-10">
            <v-icon color="grey"> mdi-phone-outline</v-icon>
            <span class="ml-4">{{ user.mobile ? user.mobile : '暂无' }}</span>
          </div>
        </v-card>
      </v-col>
      <v-col cols="12" md="9">

        <!--   个人信息 -->
        <v-card class="mb-5">
          <v-card-title class="bg-primary py-4 font-weight-bold">
            <v-icon color="white" class="mr-4"> mdi-account-circle</v-icon>
            个人信息
          </v-card-title>
          <v-divider></v-divider>
          <v-card-text class="pa-7">
            <v-row>
              <v-col cols="12" sm="6">
                <v-label class="font-weight-medium mb-2">用户名(登录账号)</v-label>
                <v-text-field
                    v-model="user.username"
                    readonly
                    color="primary"
                    variant="outlined"
                    density="compact"
                    type="text"
                    placeholder="John Deo"
                    hide-details
                />
              </v-col>
              <v-col cols="12" sm="6">
                <v-label class="font-weight-medium mb-2">昵称</v-label>
                <v-text-field
                    v-model="user.nickname"
                    color="primary"
                    variant="outlined"
                    density="compact"
                    type="text"
                    placeholder="your nickname"
                    hide-details
                />
              </v-col>
              <v-col cols="12" sm="6">
                <v-label class="font-weight-medium mb-2">邮箱地址</v-label>
                <v-text-field
                    readonly
                    v-model="user.email"
                    color="primary"
                    variant="outlined"
                    density="compact"
                    type="text"
                    placeholder="example@163.com"
                    hide-details
                />
              </v-col>
            </v-row>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions class="pa-5">
            <v-spacer></v-spacer>
            <v-btn
                class="px-5"
                color="primary"
                elevation="1"
                variant="elevated"
                @click="handleUpdateUserInfo"
            >
              更新个人信息
            </v-btn
            >
          </v-card-actions>
        </v-card>

        <!--   Change Password  -->
        <v-card class="mb-5">
          <v-card-title class="bg-primary py-4 font-weight-bold">
            <v-icon color="white" class="mr-4"> mdi-lock</v-icon>
            修改密码
          </v-card-title>
          <v-divider></v-divider>
          <v-form v-model="formValid">
            <v-card-text class="pa-7">
              <v-row>
                <v-col cols="12" sm="6">
                  <v-label class="font-weight-medium mb-2"
                  >当前密码
                  </v-label
                  >
                  <v-text-field
                      v-model="passwords.currentPassword"
                      density="compact"
                      color="primary"
                      variant="outlined"
                      :type="currentPasswordShow ? 'text' : 'password'"
                      placeholder="请输入当前密码"
                      hide-details
                      :append-inner-icon="
                    currentPasswordShow ? 'mdi-eye' : 'mdi-eye-off'
                  "
                      @click:append-inner="
                    currentPasswordShow = !currentPasswordShow
                  "
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6"></v-col>
                <v-col cols="12" sm="6">
                  <v-label class="font-weight-medium mb-2">新密码</v-label>
                  <v-text-field
                      v-model="passwords.newPassword"
                      density="compact"
                      color="primary"
                      variant="outlined"
                      :type="newPasswordShow ? 'text' : 'password'"
                      placeholder="请输入新密码"
                      hide-details
                      :append-inner-icon="
                    newPasswordShow ? 'mdi-eye' : 'mdi-eye-off'
                  "
                      @click:append-inner="newPasswordShow = !newPasswordShow"
                  >
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6">
                  <v-label class="font-weight-medium mb-2"
                  >确认密码
                  </v-label
                  >
                  <v-text-field
                      v-model="passwords.confirmPassword"
                      density="compact"
                      color="primary"
                      variant="outlined"
                      :type="confirmPasswordShow ? 'text' : 'password'"
                      placeholder="确认新密码"
                      :rules="passwordRules"
                      :append-inner-icon="
                    confirmPasswordShow ? 'mdi-eye' : 'mdi-eye-off'
                  "
                      @click:append-inner="
                    confirmPasswordShow = !confirmPasswordShow
                  "
                  >
                  </v-text-field
                  >
                </v-col>
              </v-row>
            </v-card-text>
          </v-form>
          <v-divider></v-divider>
          <v-card-actions class="pa-5">
            <v-spacer></v-spacer>
            <v-btn
                class="px-5"
                color="primary"
                elevation="1"
                variant="elevated"
                @click="handleAuthChangePassword"
            >
              更新密码
            </v-btn
            >
          </v-card-actions>
        </v-card>
      </v-col>

    </v-row>
  </v-container>
</template>

<style scoped lang="scss"></style>
